<template>
    <view class="container paddingBottomBar">
        <search-bar :placeholderText="placeholderText" @searchFn="searchFn"> </search-bar>
        <view class="main">
            <uni-load-more status="loading" v-if="isLoading"></uni-load-more>
            <view v-else>
                <radio-group class="card-cell cell-item" v-for="(item, index) in datas" :key="index">
                    <label class="cell-item-checkbox" v-if="isSelect" @click="changeSelect(item)">
                        <radio
                            :value="String(item.ID)"
                            :checked="String(item.ID) == selectId"
                            :color="easyGetColor('block')"></radio>
                    </label>
                    <view class="cell-item-main">
                        <view>
                            <text class="tag tag-main" v-if="item.IsDefault">默认</text>
                            <text class="contact-name">{{ item.ContactName }}</text>
                            <text class="contact-tel">{{ item.ContactTel }}</text>
                        </view>
                        <view>
                            <text
                                >{{ item.ProvinceName }}{{ item.CityName }}{{ item.AreaName
                                }}{{ item.StreetName ? item.StreetName : "" }}{{ item.ContactAddress }}</text
                            >
                        </view>
                    </view>
                    <iconsfont customIcons="icon-bianji" :color="'#4070FF'" size="40" @click="goEdit(item)"></iconsfont>
                </radio-group>
                <mescroll-empty v-if="datas.length < 1" :option="optEmpty" @emptyclick="emptyClick"></mescroll-empty>
            </view>
        </view>
        <view class="bottom-bar">
            <text class="btn btn-success" @click="goAdd">新增地址</text>
        </view>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import searchBar from "@/components/common/search-bar.vue"
import { GetAddressPageList } from "@/pages_supplier/service/api/supplier.js"
export default {
    components: {
        "search-bar": searchBar,
    },
    data() {
        return {
            placeholderText: "搜索已有地址",
            searchKey: "",
            datas: [],
            isSelect: false,
            optEmpty: {
                icon: "/static/img/empty.png", // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
                tip: "~ 暂无数据 ~", // 空提示
            },
            isLoading: false,
            form: "",
            selectId: "",
        }
    },
    mounted() {},
    onShow() {
        this.GetAddressPageList()
    },
    onLoad(e) {
        if (e.from) {
            this.from = e.from
            this.isSelect = true
            this.selectId = e.selectId
        }
    },
    methods: {
        ...mapMutations(["SET_USE_ADDRESS"]),
        //搜索
        searchFn(key) {
            this.searchKey = key
            this.GetAddressPageList()
        },
        //获取微信收货地址
        chooseAddress() {
            chooseAddress((res) => {
                let item = {
                    ContactName: res.userName,
                    ContactTel: res.telNumber,
                    ContactAddress: res.provinceName + res.cityName + res.countyName + res.detailInfo,
                    IsDefault: false,
                    ProvinceName: res.provinceName,
                    CityName: res.cityName,
                    AreaName: res.countyName,
                }
                let list = []
                list.push(item)
                let param = {
                    list: list,
                }
                this.batchSmartParse(param)
            })
        },
        //智能识别
        batchSmartParse(param) {
            batchSmartParse(param).then((res) => {
                res.Data.list.forEach((e) => {
                    this.save(e)
                })
            })
        },
        //获取收货地址
        GetAddressPageList() {
            let param = {
                searchKey: this.searchKey,
                pageIndex: 1,
                pageSize: 30,
            }
            this.isLoading = true
            GetAddressPageList(param).then((res) => {
                this.datas = res.Data
                this.isLoading = false
            })
        },
        //进入编辑地址
        goEdit(item) {
            this.easyGoTo(`/pages_supplier/packet/setting/edit?data=${encodeURIComponent(JSON.stringify(item))}`)
        },
        //进入新增地址
        goAdd() {
            this.easyGoTo(`/pages_supplier/packet/setting/edit`)
        },
        //保存
        save(param) {
            userAddressAddOrEdit(param).then((res) => {
                if (res.State == 1) {
                    this.easyToast("提交成功")
                    this.GetAddressPageList()
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        emptyClick() {},
        //选择地址
        changeSelect(e) {
            if (this.from == "selectBack") {
                //选择后带回信息
                const eventChannel = this.getOpenerEventChannel()
                eventChannel.emit("getSelectData", {
                    data: e,
                })
                this.easyGoBack()
            } else {
                //vuex 更新
                this.SET_USE_ADDRESS(e)
                this.easyGoBack()
            }
        },
    },
}
</script>

<style lang="scss">
.bottom-bar {
    display: flex;
    justify-content: space-between;
    padding: 0px;
    .btn {
        flex: 1;
        height: 80rpx;
        padding: 0;
        margin: 0 24rpx;
        font-size: 32rpx;
    }
}
.wx-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 20rpx;
}
.main {
    padding: $app-page-padding;

    .cell-item {
        flex-direction: row;
        align-items: center;
        .contact-name {
            font-weight: 700;
            font-size: 32rpx;
            margin-right: 20rpx;
        }
        .contact-tel {
            font-weight: 700;
            font-size: 32rpx;
        }
        .cell-item-checkbox {
            margin-right: 20rpx;
        }
        .cell-item-main {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-items: flex-start;
            margin-right: 20rpx;
        }
    }
}
.tag {
    width: 40rpx;
    height: 28rpx;
    font-size: 20rpx;
    font-family:
        PingFangSC-Regular,
        PingFang SC;
    font-weight: 400;
    color: #ffffff;
    background: #f1270c;
    border-radius: 4px;
    line-height: 28rpx;
    text-align: center;
    padding: 0 10rpx;
    margin-right: 16rpx;
}
.add-by-wx {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80rpx;
    background: #ffffff;
    border-radius: 45rpx;
    border: 1rpx solid #999999;
    font-family:
        PingFangSC-Regular,
        PingFang SC;
    font-weight: 400;
    color: #333333;
    margin: 0 24rpx;
    text {
        font-size: 32rpx;
    }
}
</style>
